<!-- <template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col>
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <p class="inforMainHd">{{queryParams.ip}}<i v-if="serverBaseInfo.remark">（{{serverBaseInfo.remark}}）</i><span @click="goBack">返回</span></p>
            </div>
          </template>
          <div class="body">
            <h3 class="inforTitle">系统信息</h3>
            <p class="inforContent inforMt"><strong>主机名：</strong>{{serverBaseInfo.hostName}}，<strong>系统描述：</strong>{{serverBaseInfo.systemDesc}}，<strong>版本：</strong>{{serverBaseInfo.version}}，<strong>cpu核数：</strong>{{serverBaseInfo.cpuNumber}}，<strong>cpu型号：</strong>{{serverBaseInfo.cpuModel}}，<strong>运行进程数量：</strong>{{serverBaseInfo.runProcessNumber}}
              <br/><strong>物理总内存：</strong>{{serverBaseInfo.memTotal}}G ，<strong>交换区总内存：</strong>{{serverBaseInfo.swapTotal}}G，<strong>交换区内存已使用：</strong>{{serverBaseInfo.swapUsed}}% ，<strong>备注：</strong>{{serverBaseInfo.remark||'无'}} ，<strong>agent版本：</strong>{{serverBaseInfo.agentVersion}} ，<strong>agent上报时间(秒)：</strong>120</p>
            <h3 class="inforTitle">磁盘空间信息</h3>
            <div class="inforMt">
              <el-table :data="diskBaseInfo">
                <el-table-column label="盘符名称" align="center" prop="devName" />
                <el-table-column label="磁盘空间" align="center">
                  <template #default="scope">{{scope.row.diskSpace}}G</template>
                </el-table-column>
                <el-table-column label="已使用" align="center">
                  <template #default="scope">{{scope.row.used}}G</template>
                </el-table-column>
                <el-table-column label="可用" align="center">
                  <template #default="scope">{{scope.row.avail}}G</template>
                </el-table-column>
                <el-table-column label="已使用%" align="center">
                  <template #default="scope">{{scope.row.usePercent}}%</template>
                </el-table-column>
              </el-table>
            </div>
            <h3 class="inforTitle">磁盘空间总使用率%（统计时间截至到昨天） 最高 <span class="zuigao"><i></i>{{usePercent.highest}} </span>平均 <span class="pingjun"><i></i>{{usePercent.average}} </span> 最低 <span class="zuidi"><i></i>{{usePercent.lowest}} </span></h3>
            <div ref="commandstats" style="height: 500px" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { getSystem } from '@/api/common';
import * as echarts from 'echarts';

const router = useRoute();
const { proxy } = getCurrentInstance();
const diskBaseInfo = ref([]);
const serverBaseInfo = ref({});
const usePercent = ref({});
const commandstats = ref(null);
const data = reactive({
  queryParams: {
    ip: router.query.ip
  }
});
const { queryParams } = toRefs(data);

//获取数据
function getData() {
  proxy.$modal.loading("正在加载");
  getSystem((queryParams.value)).then(response => {
    proxy.$modal.closeLoading();
    diskBaseInfo.value = response.data.diskBaseInfo;
    serverBaseInfo.value = response.data.serverBaseInfo;
    usePercent.value = response.data.usePercent;
    let chart = usePercent.value.chart;
    let percents = [];
    let times = [];
    for(let i=0; i<chart.length; i++){
      percents.push(chart[i].percent);
      times.push(chart[i].time);
    }

    const commandstatsIntance = echarts.init(commandstats.value);
    commandstatsIntance.setOption({
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: times
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '磁盘空间使用',
          data: percents,
          type: 'line',
          areaStyle: {}
        }
      ]
    });
  })
}
//返回
function goBack(){
  proxy.$router.go(-1);
}
getData();
</script>

<style scoped>
.inforMainHd{
  padding: 5px 0;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  overflow: hidden;
}
.inforMainHd i{
  font-style: normal;
}
.inforMainHd span{
  float: right;
  font-size: 14px;
  color: rgb(64, 158, 255);
  cursor: pointer;
}
.inforTitle{
  color: #000;
  font-size: 16px;
  font-weight: bold;
  line-height: 30px;
  padding: 5px 0;
  margin: 0;
}
.inforContent{
  color: #000;
  font-size: 14px;
  line-height: 24px;
  margin: 0;
}
.inforContent strong{
  font-weight: bold;
}
.inforTitle span{
  margin-right: 10px;
}
.inforTitle i{
  width: 0;
  height: 0;
  margin-right: 3px;
  vertical-align: middle;
  display: inline-block;
}
.inforTitle .zuigao{
  color: #d81b60;
}
.inforTitle .zuigao i{
  border-top: 5px solid #d81b60;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.inforTitle .pingjun{
  color: #f4c512;
}
.inforTitle .pingjun i{
  border-right: 5px solid #f4c512;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.inforTitle .zuidi{
  color: #55d327;
}
.inforTitle .zuidi i{
  border-bottom: 5px solid #55d327;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.inforMt{
  margin-bottom: 15px;
}
</style> -->
